<template>
  <div class="wrap-container">
    <div class="item-title">
      <span>换流阀</span>
    </div>
    <div class="item-list">
      <span v-for="(item, index) in systemData.huanliuzhanList" :key="index" class="select-item"
        @click="handle(1, item)" :class="{ active: item == $store.state.electrodeName }">{{ item }}</span>
    </div>
    <div class="item-title">
      <span>桥臂</span>
    </div>
    <div class="item-list">
      <span v-for="(item, index) in systemData.qiaobiList" :key="index" class="select-item" @click="handle(2, item)"
        :class="{ active: item === $store.state.bridgeName }">{{ item }}</span>
    </div>
    <div class="item-title flex-between">
      <span v-if="systemData.sonModuleList.length">子模块</span>
      <!--      <el-form class="form-search" inline>-->
      <!--        <el-form-item label="">-->
      <!--          <el-input-->
      <!--            size="mini"-->
      <!--            v-model="searchId"-->
      <!--            placeholder="请输入子模块号"-->
      <!--          ></el-input>-->
      <!--        </el-form-item>-->
      <!--      </el-form>-->
    </div>
    <div class="item-list last">
      <div class="flex-wrapper">
        <span v-for="(item, index) in systemData.sonModuleList" :key="index" @click="handle(3, index + 1)"
          class="select-item" :class="{ active: $store.state.moduleNo.includes(index + 1) }">{{ item }}</span>
      </div>
    </div>
  </div>
</template>
<script>
import { huanliufa, bridgeList, zimukuai } from '@/assets/data/index.js'

export default {
  name: "ItemWrap",
  props: {
    typeIndex: {
      type: Number,
    },
  },
  data() {
    return {
      systemData: {
        huanliuzhanList: [],
        huanliufaList: [],
        qiaobiList: [],
        sonModuleList: [],
      },
    };
  },
  created() {
    // 换流阀
    this.systemData.huanliuzhanList = huanliufa;
    this.$store.commit("setElectrodeName", huanliufa[0]);
    // 桥臂
    this.systemData.qiaobiList = bridgeList;
    this.$store.commit("setBridgeName", bridgeList[0]);
    // 子模块
    this.systemData.sonModuleList = zimukuai;
    this.$store.commit("setModuleNo", [1]);
    this.getXjSiteList();
  },
  methods: {
    handle(index, val) {
      if (index === 1) {
        this.$store.commit("setElectrodeName", val);
      } else if (index === 2) {
        this.$store.commit("setBridgeName", val);
      } else if (index === 3) {
        let arr = this.$store.state.moduleNo;

        // 检查数组是否包含特定值
        if (arr.includes(val)) {
          // 如果包含，则删除
          const index = arr.indexOf(val);
          if (index > -1) {
            arr.splice(index, 1); // 从数组中删除该值
          }
        } else {
          // 如果不包含，则添加
          arr.push(val); // 向数组中添加该值
        }
        this.$store.commit("setModuleNo", arr);
      }
    },
  },
};
</script>
<style scoped lang="less">
.wrap-container {
  width: 360px;
  height: 100%;
  // border: 1px solid #006686;
  background-color: #202f3e;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .item-title {
    font-size: 16px;
    color: #fff;
    margin: 20px 0 10px 5px;
    display: flex;
    align-items: center;

    &.flex-between {
      justify-content: space-between;
    }

    span {
      margin-right: 10px;

      &.button {
        cursor: pointer;
        color: #aaa;

        &:hover {
          color: #006686;
        }
      }

      &.active {
        color: #fff;
      }
    }

    .el-input {
      width: 160px;
    }
  }

  .item-list {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    // justify-content: flex-start;
    align-items: flex-start;

    &.last {
      flex: 1;
      overflow-y: auto;

      .flex-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        // align-content: flex-start;
      }
    }
  }
}

.select-item {
  cursor: pointer;

  &:hover {
    color: #006686;
  }

  height: 32px;
  margin: 4px 5px;
  padding: 0 4px;
  border: 2px solid #006686;
  color: #fff;
  font-size: 14px;
  line-height: 24px;

  &.active {
    background-color: #006686;
    color: #fff;
  }

  //&.active:hover {
  //  color: #000;
  //}
}
</style>
